// 1. 清除默认边距和内边距
* {
  margin: 0;
  padding: 0;
  // 怪异盒模型：width = 内容宽 + padding + border（避免计算困扰）
  box-sizing: border-box;
}

// 2. 重置块级元素
html,
body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px; // 基础字体大小
  line-height: 1.5; // 基础行高（优化文本可读性）
  color: #333; // 基础文本颜色
  background-color: #fff; // 基础背景色
  -webkit-font-smoothing: antialiased; // 字体抗锯齿（提升显示效果）
}

// 3. 重置列表元素
ul,
ol,
li {
  list-style: none; // 清除默认列表样式
}

// 4. 重置文本元素
a {
  color: inherit; // 继承父级文本颜色
  text-decoration: none; // 清除默认下划线
  &:hover {
    color: #409eff; // 链接 hover 颜色（可自定义）
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; // 清除默认加粗
  font-size: inherit; // 继承父级字体大小（避免嵌套时样式混乱）
}

// 5. 重置表单元素
input,
button,
select,
textarea {
  font-family: inherit; // 继承字体（避免表单元素字体不一致）
  font-size: inherit;
  outline: none; // 清除默认聚焦轮廓（后续可自定义）
  border: none;
  background-color: transparent;
}

textarea {
  resize: vertical; // 文本域仅允许垂直拉伸
}

// 6. 重置表格
table {
  border-collapse: collapse; // 合并边框
  border-spacing: 0;
}

// 7. 重置图片和媒体元素
img,
video,
audio {
  display: block; // 转为块级元素（避免默认 inline 带来的底部间隙）
  max-width: 100%; // 防止溢出容器
  height: auto; // 保持宽高比
}

// 8. 清除浮动（兼容旧代码，现代开发可优先用 flex/grid）
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

// 9. 基础工具类（可选，根据需求添加）
.fl {
  float: left;
}
.fr {
  float: right;
}
.hidden {
  display: none !important;
}
.visible {
  display: block !important;
}
